import { Routes, Route , Navigate} from 'react-router-dom'
import React, { Suspense, useMemo } from 'react'
import NotFound from '@/pages/404'
import Detail from '@/pages/article-detail'
import Loading from '@/components/loading'
import { useRequest } from 'ahooks'
import { getWebHot } from '@/service/monitor'
import moment from 'moment'
import { useMobile } from '@/hooks/useMobile'
import './index.less'

const routes = [
  {
    path: '/home',
    component: React.lazy(() => import("@/pages/home")),
    container:false
  },
  {
    path: '/blog',
    component:React.lazy(()=>import('@/pages/blog')),
    container:true
  },
  {
    path: '/blog_detail/:id',
    component:Detail,
    container:true
  },
  {
    path: '/book',
    component: React.lazy(() => import('@/pages/book')),
    container:true
  },
  {
    path: '/book_detail/:id',
    component:React.lazy(()=>import('@/pages/article-detail')),
    container:true
  },
  {
    path: '/note',
    component: React.lazy(() => import('@/pages/note')),
    container:true
  },
  {
    path: '/note_detail/:id',
    component:React.lazy(()=>import('@/pages/article-detail')),
    container:true
  },
  {
    path: '/guitar',
    component: React.lazy(() => import('@/pages/dev')),
    container:true
  },
  {
    path: '/goal',
    component: React.lazy(() => import('@/pages/goal')),
    container:true
  },
  {
    path: '/keyword',
    component: React.lazy(() => import('@/pages/keyword')),
    container:true
  },
  {
    path: '/keyword_list/:tag',
    component: React.lazy(() => import('@/pages/keyword/list')),
    container:true
  },
  {
    path: '/letter',
    component: React.lazy(() => import('@/pages/dev')),
    container:true
  },
  {
    path: '/about',
    component: React.lazy(() => import('@/pages/about')),
    container:true
  },
  {
    path: '/review/:id',
    component: React.lazy(() => import('@/pages/goal/review')),
    container:true
  },


  // 管理部分
  {
    path: '/admin',
    component: React.lazy(() => import('@/pages/admin')),
    container: false,
    children: [
      {
        path: 'article',
        component: React.lazy(() => import("@/pages/admin/article"))
      },
      {
        path: 'favour',
        component: React.lazy(() => import("@/pages/admin/favour"))
      },
      {
        path: 'goal',
        component: React.lazy(() => import("@/pages/admin/goal"))
      },
      {
        path: 'article-type',
        component:React.lazy(()=> import("@/pages/admin/article-type"))
      },
      {
        path: 'about/:id',
        component:React.lazy(()=> import("@/pages/admin/editer"))
      },
      {
        path: 'review',
        component: React.lazy(()=> import("@/pages/admin/review"))
      }
    ]
  },

  {
    path: '/admin_edit/:id',
    component: React.lazy(() => import("@/pages/admin/editer"))
  },
]

const Container: App.ReactFunction = ({ children }) => {

  const { isMobile } = useMobile()
  
  const { data: webVisit } = useRequest(getWebHot, { manual: isMobile });

  const webInfo = useMemo(() => {
    if (webVisit) {
      const {
        start_time,
        visit_count: visit,
        api_count: api,
        total
      } = webVisit
      return {
        day: moment().diff(start_time, "days"),
        visit,
        api,
        total
      }
    }
    return {}
  } , [ webVisit ])

  return (
    <div className="container main">
      {children}
      {
        !isMobile && (
          <div className="monitor">     
            <div className="user-info"></div>
            <div className="statistics">
              <div>本站稳定运行：{ webInfo.day || '--' } 天</div>
              <div>累计访问量：{ webInfo.visit || '--' } 次</div>
              <div>累计接口调用：{ webInfo.api || '--' } 次</div>
              <div>累计文章数量：{ webInfo.total || '--' } 篇</div>
            </div>
          </div>
        ) 
      }
      
    </div>
  )
}

// 以下是路由拦截的逻辑

export default function RouterPage() {
  return (
    <Suspense fallback={ <Loading/> }>
      <Routes>
        <Route path="/" element={ <Navigate to='/home' />}/>
        {
          routes.map(route => {
            if (route.container) {
              return (
                <Route
                  key={route.path}
                  path={route.path}
                  element={
                    <Container>
                      <route.component />
                    </Container>
                  }
                >
                  {
                    route.children?.map(item => {
                      return <Route key={ item.path} path={item.path} element={ <item.component/> }/>
                    })
                  }
                </Route>
              )
            }
            return (
              <Route
                key={route.path}
                path={route.path}
                element={<route.component />}
              >
                {
                  route.children?.map(item => {
                    return <Route key={ item.path} path={item.path} element={ <item.component/> }/>
                  })
                }
              </Route>
            )
          })
        }
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Suspense>
      
  )
}